const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const serverConfig = require('./serverConfig');
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

const env = {
    'process.env.BABEL_ENV': JSON.stringify('development'),
    'process.env.NODE_ENV': JSON.stringify('development'),
    'process.env.PUBLIC_URL': '/',
    'process.env.HOST': '',
    'process.env.PORT': '',
    'process.env.WDS_SOCKET_HOST ': '',
    'process.env.WDS_SOCKET_PATH': '',
    'process.env.WDS_SOCKET_PORT': '',
    'process.env.HTTPS': false,
};

module.exports = (env) => ({
    target: 'web',
    mode: 'production',
    devtool: 'source-map',
    entry: {
        'pdv-ui': './src/index.tsx',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[contenthash].min.js',
        publicPath: '/',
    },
    devServer: serverConfig,
    resolve: {
        extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
        fallback: {
            fs: false,
        },
        alias: {
            '@': path.resolve(__dirname, 'src'),
        },
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        plugins: [],
                        presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }]],
                        sourceType: 'unambiguous',
                    },
                },
            },
            {
                test: /\.(ts|tsx)$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        plugins: [],
                        presets: [
                            '@babel/preset-env',
                            ['@babel/preset-react', { runtime: 'automatic' }],
                            '@babel/preset-typescript',
                        ],
                        sourceType: 'unambiguous',
                    },
                },
            },
            {
                test: cssRegex,
                exclude: cssModuleRegex,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                        },
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    'tailwindcss',
                                    'postcss-flexbugs-fixes',
                                    [
                                        'postcss-preset-env',
                                        {
                                            autoprefixer: {
                                                flexbox: 'no-2009',
                                            },
                                            stage: 3,
                                        },
                                    ],
                                    'postcss-normalize',
                                ],
                            },
                        },
                    },
                ],
            },
            {
                test: cssModuleRegex,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                            modules: {
                                mode: 'local',
                                localIdentName: '[local]_[hash:base64:6]',
                            },
                        },
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    'tailwindcss',
                                    'postcss-flexbugs-fixes',
                                    [
                                        'postcss-preset-env',
                                        {
                                            autoprefixer: {
                                                flexbox: 'no-2009',
                                            },
                                            stage: 3,
                                        },
                                    ],
                                    'postcss-normalize',
                                ],
                            },
                        },
                    },
                ],
            },
            {
                test: sassRegex,
                exclude: sassModuleRegex,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 3,
                        },
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    'tailwindcss',
                                    'postcss-flexbugs-fixes',
                                    [
                                        'postcss-preset-env',
                                        {
                                            autoprefixer: {
                                                flexbox: 'no-2009',
                                            },
                                            stage: 3,
                                        },
                                    ],
                                    'postcss-normalize',
                                ],
                            },
                        },
                    },
                    'sass-loader',
                ],
            },
            {
                test: sassModuleRegex,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 3,
                            modules: {
                                mode: 'local',
                                localIdentName: '[local]_[hash:base64:6]',
                            },
                        },
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    'tailwindcss',
                                    'postcss-flexbugs-fixes',
                                    [
                                        'postcss-preset-env',
                                        {
                                            autoprefixer: {
                                                flexbox: 'no-2009',
                                            },
                                            stage: 3,
                                        },
                                    ],
                                    'postcss-normalize',
                                ],
                            },
                        },
                    },
                    'sass-loader',
                ],
            },
            {
                test: lessRegex,
                exclude: lessModuleRegex,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: false,
                        },
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    'tailwindcss',
                                    'postcss-flexbugs-fixes',
                                    [
                                        'postcss-preset-env',
                                        {
                                            autoprefixer: {
                                                flexbox: 'no-2009',
                                            },
                                            stage: 3,
                                        },
                                    ],
                                    'postcss-normalize',
                                ],
                            },
                        },
                    },
                    {
                        loader: require.resolve('less-loader'),
                        options: {
                            sourceMap: false,
                            lessOptions: {
                                strictMath: true,
                                javascriptEnabled: true,
                                modifyVars: {
                                    // colorPrimary: 'red',
                                },
                            },
                        },
                    },
                ],
            },
            {
                test: lessModuleRegex,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: false,
                            modules: {
                                localIdentName: '[local]_[hash:base64:6]',
                            },
                        },
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    'tailwindcss',
                                    'postcss-flexbugs-fixes',
                                    [
                                        'postcss-preset-env',
                                        {
                                            autoprefixer: {
                                                flexbox: 'no-2009',
                                            },
                                            stage: 3,
                                        },
                                    ],
                                    'postcss-normalize',
                                ],
                            },
                        },
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            lessOptions: {
                                javascriptEnabled: true,
                                modifyVars: {
                                    // colorPrimary: 'red',
                                },
                            },
                            sourceMap: false,
                        },
                    },
                ],
            },
            {
                test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: '[name]-[hash].[ext]',
                            outputPath: 'images/',
                            limit: 204800,
                        },
                    },
                ],
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                exclude: [path.resolve(__dirname, 'src/assets')],
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: '[name]-[hash].[ext]',
                            outputPath: 'images/',
                            limit: 204800,
                        },
                    },
                ],
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                include: [path.resolve(__dirname, 'src/assets')],
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-react', '@babel/preset-env'],
                        },
                    },
                    {
                        loader: '@svgr/webpack',
                        options: {
                            babel: false,
                            icon: true,
                        },
                    },
                ],
            },
        ],
        parser: {
            javascript: {
                exportsPresence: 'error',
            },
        },
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './public/index.html'),
            favicon: path.resolve(__dirname, './public/favicon.ico'),
            inject: 'body',
            title: '我的应用',
        }),
        new webpack.DefinePlugin(env),
    ],
});
